<template>
  <el-form class="add-event-save-img">
    <switch-normal v-if="isUploadImgToServer" v-model="saveImg.comps[2].attrs.isUploadImgToServer" label="上传图片到服务器" @change="onUpdateEvent"></switch-normal>
    <textarea-normal v-if="isHiddenCompIds" v-model="saveImg.comps[1].attrs.hiddenCompIds" label="截图隐藏组件组" placeholder="[id,id]"  @change="onUpdateEvent"></textarea-normal>
    <input-normal v-if="saveImg.comps[3] && saveImg.comps[3].attrs.value == SAVE_IMG_DATA_TYPES[0].value" v-model="saveImg.comps[3].attrs.quality" label="图片质量" placeholder="0.8"  @change="onUpdateEvent"></input-normal>
  </el-form>
</template>

<script>
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
import { SAVE_IMG_DATA_TYPES } from '@/common/events'

import { mapState, mapActions } from 'vuex'

  export default {
    setup () {
      return {
        SAVE_IMG_DATA_TYPES: SAVE_IMG_DATA_TYPES,
      }
    },
    components: {
      SwitchNormal,
      TextareaNormal,
      InputNormal,
    },
    computed:{
      ...mapState({
        saveImg: (state) => {
          if(state.components.currentComponentData){
            return _.cloneDeep(state.components.currentComponentData.events.saveImg)
          }else{
            return _.cloneDeep(state.components.currentPage.events.saveImg)
          }
        },
        isComp: (state) => state.components.currentComponentData ? true : false
      }),
      isUploadImgToServer(){
        const event = this.saveImg;
        if(event){
          return event.comps[2] && event.comps[2].attrs.value && event.comps[2].attrs.value.length > 0;
        }else{
          return false;
        }
      },
      isHiddenCompIds(){
        const event = this.saveImg;
        if(event){
          return !event.comps[1].attrs.value || event.comps[1].attrs.value.length <= 0;
        }else{
          return true;
        }
      },
    },
    methods:{
      ...mapActions({
        updateEvent: "components/updateEvent",
        updatePageEvent: "components/updatePageEvent",
      }),
      onUpdateEvent() {
        const event = this.saveImg;
        if(this.isComp){
          this.updateEvent({type:event.type, event});
        }else{
          this.updatePageEvent({type:event.type, event});
        }
      },
    }
  }
</script>